<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>菜单编辑页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" th:href="@{plugins/datepicker/datepicker3.css}"/>
    <script th:src="@{plugins/datepicker/bootstrap-datepicker.js}"></script>
    <script
            th:src="@{plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js}"></script>
    <script th:src="@{plugins/select2/select2.full.min.js}"></script>
    <script type="text/javascript">
        $(function () {
            $("#createDate").datepicker({
                autoclose: true
            });
            //为图标添加点击事件
            $('#selectIcon li').click(function (e) {
                $('#ico').attr("class", $(this).attr("class"));
                $('#ico').attr("value", $(this).attr("class"));
                $('#icoInput').attr("value", $(this).attr("class"));
            })
        });
    </script>
</head>
<body>
<div id="msg" style="color: red;"></div>
<form role="form" id="blogForm" data-th-object="${menuBean}"
      data-th-method="post">
    <div class="box-body">
        <input type="hidden" id="menuId" data-th-field="*{id}"/>
        <input type="hidden" id="editPid" data-th-value="${pidValue}"/>
        <div class="form-group">
            <label for="title">菜单名称</label>
            <input type="text"
                   class="form-control" id="title" data-th-field="*{name}"
                   placeholder="请输入名称"/>
        </div>
        <div class="form-group">
            <label for="url">菜单链接</label>
            <input type="text"
                   class="form-control" id="url" data-th-field="*{url}"
                   placeholder="请输入菜单链接"/>
        </div>
        <div class="form-group">
            <label>所属菜单</label>
            <select id="pid" name="pid" class="form-control select2 " tabindex="-1">
                <option value="0">根目录</option>
                <option data-th-each="menu:${menuList}" data-th-value="${menu.id}"
                        data-th-text="${menu.name}"></option>
            </select>
        </div>
        <div class="form-group">
            <label for="description">描述</label>
            <input type="text"
                   class="form-control" id="description"
                   data-th-field="*{description}"
                   placeholder="描述"/>
        </div>
        <div class="form-group">
            <label for="scort">排序</label>
            <input type="text"
                   class="form-control" digits="true" id="scort" data-th-field="*{scort}"
                   placeholder="排序"/>
        </div>
        <div class="form-group">
            <label>菜单图标</label>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" style="width: 63px"
                        type="button" id="dropdownMenu1" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                    <div id="ico" data-th-class="*{ico}"></div>
                    <input type="hidden" id="icoInput" data-th-field="*{ico}"/>
                    <span class="caret"></span>
                </button>
                <ul id="selectIcon" class="dropdown-menu" style="min-width: 53px"
                    aria-labelledby="dropdownMenu1">
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-cog"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-user"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-folder"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-book"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-rmb"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-ban"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-credit-card"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-arrows-h"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-long-arrow-left"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-long-arrow-right"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-user-secret"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-user-md"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-briefcase"></li>
                    <li style="display: block; height: 20px; text-align: center"
                        class="fa fa-hourglass-start"></li>

                </ul>
            </div>
        </div>
    </div>
    <!-- <div class="box-footer">
     <button type="submit" class="btn btn-primary">保存</button>
    </div> -->
</form>
</body>
<script>
    $(function () {
        $("#blogForm").validate({
            onfocusout: function (element) {
                $(element).valid();
            }
        });
    })
</script>
</html>
